// 引入Cout的UI组件
import CountUI from '../../components/Count'

// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'

// 1. mapStateToProps函数返回一个对象；
// 2. 返回的对象中的key作为传递给UI组件props的key，value作为传递给UI组件props的value；
// 3. mapStateToProps用于传递状态；
function mapStateToProps(state) {
  return { count: state }
}

// 1. mapDispatchToProps函数返回一个对象；
// 2. 返回的对象中的key作为传递给UI组件props的key，value作为传递给UI组件props的value；
// 3. mapDispatchToProps用于传递操作状态的方法
function mapDispatchToProps(dispatch) {
  return {
    add: data => {
      // 通知redux执行加法
      dispatch(createIncrementAction(data))
    },
    minus: data => {
      dispatch(createDecrementAction(data))
    },
    addAsync: (data, interval) => {
      dispatch(createIncrementAsyncAction(data, interval))
    }
  }
}

// 创建Count容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)
